<template>
  <div class="ui middle aligned center aligned grid" id="loginform">
    <div class="column">
      <h2 class="ui teal image header">
        <i class="huge dark green building icon"></i>
        <div class="content">请登录ASC后台管理系统</div>
      </h2>
      <form class="ui large form" @submit.prevent="onSubmit">
        <div class="ui stacked segment">
          <div class="field">
            <div class="ui left icon input">
              <i class="user icon"></i>
              <input
                type="text"
                name="email"
                v-model="auth.username"
                placeholder="请输入 E-mail 地址"
                required
                v-on:input="clearerrors"
              />
            </div>
          </div>
          <div class="field">
            <div class="ui left icon input">
              <i class="lock icon"></i>
              <input
                type="password"
                name="password"
                v-model="auth.password"
                id="password"
                placeholder="请输入密码"
                v-on:input="clearerrors"
              />
            </div>
          </div>
        </div>
      <div class="ui error message" v-bind:class="{ 'shown': hasErrors }">
        {{ errors.message }}
      </div>
        <button id="loginbtn" class="ui fluid large teal button">Login</button>
      </form>


      <ul class="error-messages">
        <template v-if="errors">
          <li>{{ errors.message }}</li>
        </template>
        <!--chceck vue-->
      </ul>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/user";
//import $ from "jquery";
const Cookie = process.client ? require("js-cookie") : undefined;
export default {
  layout:"empty",
  data() {
    return {
      auth: {
        username: "",
        password: "",
      },
      errors: {},
    };
  },
  computed: {
    hasErrors() {
      if (JSON.stringify(this.errors) === "{}") {
        return false;
      } else {
        return true;
      }
    },
  },
  methods: {
    clearerrors(){
      this.errors = {}
    },
    async onSubmit() {
      try {
        const { data } = await login({
          username: this.auth.username,
          password: this.auth.password,
        });

        //console.log(data);
        let userinfo = {
          auth: this.auth,
          name: data.name,
          avator: data.avatar_urls,
          description: data.description,
          id:data.id
        };

        console.log(JSON.stringify(userinfo));
        //TODO 保持用户数据、
        this.$store.commit("setUser", userinfo);
        Cookie.set("user", JSON.stringify(userinfo));
        //跳转首页
        this.$router.push('/main')
      } catch (error) {
        //console.log(error)
        this.hasErrors;
        console.dir(error);
        this.errors = error.response.data;
        //this.errors.status = error.response.status

        console.log(this.errors);
        this.hasErrors;
        this.$router2 = { user: null };
        console.log(this.$router2);
      }
      //解构数据，获取响应体data
    },
  },
};
</script>

<style scoped>
body {
  background-color: #dadada;
}
body > .grid {
  height: 600px;
}
.image {
  margin-top: -100px;
}
.column {
  max-width: 450px;
}
#loginform {
  height: 600px;
}
.shown {
  display: block !important; 
}
</style>